<!--会员充值-->
<template>
  <div>
    <div class="block" m="t-4">
      <el-carousel trigger="click" :autoplay="true" :interval="2000">
        <el-carousel-item v-for="(item,index) in vipList" :key="index">
          <img :src="item" style="width: 100%;height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin-top: 20px;margin-left: 100px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名：">
          <el-text class="mx-1" size="large">{{userName}}</el-text>
        </el-form-item>
        <el-form-item label="成为会员：">
          <div>
            <el-check-tag :checked="checked1" @change="onChange1">
              <div style="padding: 16px">
                <p style="margin-left: 20px;margin-bottom: 10px">月卡</p>
                <p style="font-size: 20px;color: #F8CF01">￥20.00</p>
              </div>

            </el-check-tag>
            <el-check-tag :checked="checked2" @change="onChange2">
              <div style="padding: 16px">
                <p style="margin-left: 20px;margin-bottom: 10px">季卡</p>
                <p style="font-size: 20px;color: #F8CF01">￥50.00</p>
              </div>
            </el-check-tag>
            <el-check-tag :checked="checked3" @change="onChange3">
              <div style="padding: 16px">
                <p style="margin-left: 20px;margin-bottom: 10px">年卡</p>
                <p style="font-size: 20px;color: #F8CF01">￥160.00</p>
              </div>
            </el-check-tag>

            <div style="margin-top: 10px">
              <p class="js_01">1.成为VIP预约场地免定金</p>
              <p class="js_01" >2.成为月卡会员打八折</p>
              <p class="js_01">3.成为季卡会员打六折</p>
              <p class="js_01">4.成为年卡会员半价</p>
              <p class="js_01">5.所有解释权归球馆所有</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="总金额">
          <el-text tag="b" type="warning" style="font-size: 28px">￥{{money}}</el-text>
        </el-form-item>
        <el-form-item>
          <el-button text @click="centerDialogVisible = true" type="primary"  style="margin-left: 300px">
            付款
          </el-button>
          <el-dialog
              v-model="centerDialogVisible"
              title="付款"
              width="30%"
              align-center
          >
            <div style="margin-left: 100px">
              <p>用户名: {{ userName }}</p>
              <p>充值等级：{{level}}</p>
              <p>总金额：<el-text tag="b" type="warning" >￥{{money}}</el-text></p>

              <div style="margin-left: -50px;width:300px;height: 1px;margin-top:10px;margin-bottom: 15px;background-color: #999999"></div>
              <el-row :gutter="20" >
                <el-col :span="9">
                  <img
                      :src="require('@/assets/img/zf_01.jpg')"
                      class="image"
                  />
                </el-col>
                <el-col :span="15">
                  <div style="padding: 14px">
                    <span style="font-size: 10px;margin-left: 3px">请扫码二维码支付{{money}}元</span>
                    <p style="font-size: 25px;margin-left: 3px">5A级球馆欢迎您来~</p>

                  </div>
                </el-col>
              </el-row>
            </div>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="vipScuccess">
         支付
        </el-button>
      </span>
            </template>
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios';
import {ElNotification} from "element-plus";
export default {
  name: "MemberRecharge",
  data() {
    return {
      userName:localStorage.getItem('userAccount'),
      isMember:localStorage.getItem('isMember'),
      userId:localStorage.getItem('userId'),
      checked1:ref(false),
      checked2:ref(false),
      checked3:ref(false),
      money:'0.00',
      level:'',
      centerDialogVisible:ref(false),
      vipList: [
        require('@/assets/img/vip_01.jpg'),
        require('@/assets/img/vip_02.png'),
        require('@/assets/img/vip_03.png'),
      ],
    }
  },
  methods:{
    onChange1(){
      this.checked1= !this.checked1
      if (this.checked1){
        this.money = '20.00'
        this.level = "月卡VIP"
        this.isMember = 1
      }
    },
    onChange2(){
      this.checked2= !this.checked2
      if (this.checked2){
        this.money = '50.00'
        this.level = "季卡VIP"
        this.isMember = 2
      }
    },
    onChange3(){
      this.checked3= !this.checked3
      if (this.checked3){
        this.money = '160.00'
        this.level = "年卡VIP"
        this.isMember = 3
      }
    },
    vipScuccess(){
      this.centerDialogVisible = false;
      const data = {
        userId: this.userId,
        isMember: this.isMember,
      };
      axios
          .post('http://39.101.75.128:8080/golfer/user/recharge', data)
          .then((response) => {
            if (response.data.code == 200) {
              localStorage.setItem('isMember', this.isMember);
              ElNotification({
                title: '付款',
                message: '支付成功',
                type: 'success',
              });
            } else {
              // 登录失败，提示错误信息
              console.log("失败")
              this.$message.error(response.data.msg);
            }
          })
          .catch((error) => {
            // 处理请求失败的情况
            console.log(error);
          });
    },
  }
}
</script>
<script setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

</script>
<style scoped>
.el-form-item{
  margin-bottom: 30px;
}
.el-form-item__label{
  font-size: 18px;
  font-weight: bold;
}
.el-check-tag{
  margin-right: 15px;
}
.js_01{
  color: #909399;
  margin: 0;
  padding: 0;
  font-size: 12px;
  height: 22px;
  word-break: break-all;
}
.image {
  width: 140px;
  height: 150px;
  display: block;
}
</style>
